<!--
 @description 经销商门店联系人信息
 @fileName ShopContacts.vue
 @author zengqiongying
 @created 2023/04/28 13:54:59
-->
<template>
  <div class="has-foot-pb">
    <Card v-for="(item, i) in list" :key="`${i}-${item.id}`">
      <template #title>
        <div class="card-header">
          <span class="name"><span class="icon"></span>门店联系人{{ i + 1 }}</span>
          <span
            class="btn-del"
            v-if="isNewBusinessTakeover && ![1, '1'].includes(item.isAutoAdd)"
            @click="onDelete(i)"
          ></span>
        </div>
      </template>
      <ContactsItem
        v-model:modelValue="list[i]"
        :contactTypes="contactTypes"
        :showShop="isTakeOverTheOriginalStore"
        :readonlyFields="getReadonlyFileds(item)"
        :shopOptions="shopOptions"
      />
    </Card>
    <Card>
      <div class="btn-add-larg" @click="onCreat">
        <qmp-icon name="plus" />
        添加门店联系人
      </div>
    </Card>
    <div :class="['ctm-content-foot', { relative: keyboard.show }]">
      <div class="btn radius-larg ctm-btn-main" @click="onSave(false)">保存</div>
    </div>
  </div>
</template>

<script lang="ts">
  import { reactive, toRefs, getCurrentInstance, nextTick } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import Card from '@/components/Card/index.vue'
  import ContactsItem from '../components/Contacts/Item.vue'
  import { detail } from '@/apis/dealerMarketing/NewArchive'
  import { getNewShopContact } from '@/apis/ctmCustomerChange/Contact'
  import { queryNewBusinessTakeoverShops } from '@/apis/ctmCustomerChange/index'
  import { ContactsMixin } from '../mixins/Contacts'
  import GetKeyboardMixin from '@/utils/useKeyboard'
  export default {
    name: 'DealerNewArchiveShopContacts',
    components: { Card, ContactsItem },
    setup() {
      const { proxy }: any = getCurrentInstance()
      const $router = useRouter()
      const $route = useRoute()
      const { datas, onSave, onCreat, onDelete, initDictData } = ContactsMixin(3, [], () => {
        proxy.$SimpleEvents.emit('refreshCustomerNewArchiveEditInfo', datas.id)
        nextTick(() => {
          $router.goBack()
        })
      })
      datas.id = $route.query?.id || ''
      datas.changeCode = $route.query?.changeCode || ''
      datas.isTakeOverTheOriginalStore = false // 是否接管原商家门店
      datas.shopOptions = []
      datas.isNewBusinessTakeover = 0 // 是否新商接管：1 是(需选择门店)、 0 否
      datas.changeCode = $route.query?.changeCode || ''
      datas.keyboard = {
        show: false
      }
      datas.keyboard = GetKeyboardMixin()

      const getChangeDetail = () => {
        const id = `${datas.id}`
        detail(id).then((res: any) => {
          const d = res.data || {}
          // const shopList = (d.shopDTOS || []).filter((v: any) => [1, '1'].includes(v.isNewBusinessTakeover))
          datas.changeCode = d.code || ''

          datas.isTakeOverTheOriginalStore = [1, '1'].includes(d.isTakeOverTheOriginalStore)

          /* datas.isNewBusinessTakeover = shopList && shopList.length > 0 ? 1 : 0 // 是否包含新商接管的门店
          datas.shopOptions = shopList.map((v: any) => {
            return {
              id: v.id,
              name: v.name,
              code: v.originalCode
            }
          }) */

          /* datas.shopCode = res.data?.shopDTO?.code || ''
          const list = res.data?.contactDTOS || []
          datas.list = list.filter((v: any) => v.contactScope === 3) */
        })
      }

      const getShopList = () => {
        // 查询新商接管门店列表
        queryNewBusinessTakeoverShops(datas.changeCode).then((res) => {
          const shopList = res.data || []
          datas.isNewBusinessTakeover = shopList && shopList.length > 0 ? 1 : 0 // 是否包含新商接管的门店
          datas.shopOptions = shopList.map((v: any) => {
            return {
              id: v.id,
              name: v.name,
              code: v.originalCode
            }
          })
        })
      }

      const getList = () => {
        getNewShopContact(`${datas.id}`).then((res) => {
          datas.list = res.data || []
          // isAutoAdd=1 为自动填充（原商家门店，联系人类别默认为“责任人“且不能编辑，门店不允许删除）
        })
      }
      const getReadonlyFileds = (row: any) => {
        if (datas.isTakeOverTheOriginalStore && datas.isNewBusinessTakeover) {
          if ([1, '1'].includes(row.isAutoAdd)) {
            return ['shopBusinessId', 'shopName', 'contactTypeName', 'contactTypeCode']
          }
        }
        return []
      }
      getChangeDetail()
      getShopList()
      initDictData()
      getList()

      return {
        ...toRefs(datas),
        onSave,
        onCreat,
        onDelete,
        getReadonlyFileds
      }
    }
  }
</script>
<style lang="less" scoped>
  @import url('../styles/common.less');
</style>
